<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>个人博客</title>
		<style type="text/css">
			/*设置背景图片*/
			body{
				background: url(img/bg.jpg);
				
			}
			/*设置头部图片的内边距*/
			.header-b{
				padding: 0px;
				font-size: 0px;
			}
			/*设置导航栏的文本颜色和位置*/
			.nav{
				background: deepskyblue;
				text-align: center;
				color: white;
			}
			/*设置所有单元格的宽度*/
			td{
				width: 86px;
				
			}
			/*设置标题2下的a标签颜色*/
			h2 a{
				color: cornflowerblue;
			}
			/*设置ce-bian类的样式*/
			.ce-bian{
				background:lightblue;
				vertical-align:text-top;
				text-align: center;
			}
			/*设置ce-bian1类的样式*/
			.ce-bian1{
				background: url(img/big.jpg) no-repeat;
				background-size: 100% ;
				
			}
			/*设置wenben类的样式*/
			.wenben{
				padding-left: 30px;
			}
			/*设置文本字体大小 */
			p{
				font-size: 14px;
			}
		</style>
	</head>
	<body>
		<!-- 表格的开始 -->
		<table border="0" cellspacing="0" cellpadding="10px" align="center">
			<!-- 头部背景图 -->
			<tr>
				<th class="header-b" colspan="7"><img src="img/a.jpg" width="100%"/></th>
			</tr>
			<!-- 导航栏 -->
			<tr>
				<td class="nav">首页</td>
				<td class="nav">心情日记</td>
				<td class="nav">Free</td>
				<td class="nav">一起走起</td>
				<td class="nav">从明天起</td>
				<td class="nav">纸飞机</td>
				<td class="nav">下一站</td>
			</tr>
			<!-- 左侧图文 -->
			<tr>
				<td class="ce-bian"  colspan="2">
					<br />
					<img src="img/3.jpg"  />
					<h4>我的日记本</h4>
					<p>他们彼此深信，是瞬间迸发的热情让他们相遇。这样的确定是美丽，但变幻无常更为美丽。</p>
					
					<img src="img/4.jpg" />
					<h3>心情轨迹</h3>
					<p>董事长的一切都让人既羡慕又忌妒，但更让人受不了的是，有一天，上苍忽然赐给他一个神奇的礼物.....</p>
				</td>
			<!-- 右侧文本 -->
				<td colspan="5" class="ce-bian1">
					<h2 class="wenben"><a href="#">介绍</a></h2>
					<p class="wenben">我努力的抓紧世界，最后却仍被世界淘汰，如果一开始就松手，我会不那么伤心吗？你说，亲爱的孩子，世事难料，随它去吧！</p>
					
					<h2 class="wenben"><a href="#">照片本子</a></h2>
					<p class="wenben">
					关于童年，你记住了什么？<br />
					两岁时，我拥有一只巨大的粉红猪，它总是在我嚎啕大哭时逗我笑。<br />
					三岁时，我骑着小木马一路摇到外婆家，它不喝水也不吃草。<br />
					四岁时，我离家出走，在公车上睡着了，最后是太空超人送我回家。<br />
					我真的没骗你，我通通都记得，还有照片为证。
					</p>
					
					<h2 class="wenben"><a href="#">地下铁</a></h2>
					<p class="wenben">
						天使在地下铁的入口，<br />
						和我说再见的那一年，<br />
						我渐渐看不见了。<br />
						十五岁生日的那年秋天早晨，<br />
						窗外下着毛毛雨，<br />
						我喂好我的猫。<br />
						六点零五分，<br />
						我走进地下铁。<br />
					</p>
					
					<h2 class="wenben"><a href="#">向左走向右走</a></h2>
					<p class="wenben">
						They're both convinced<br />
						that a sudden passion joined them.<br />
						Such certainth is beautiful,<br />
						but uncertainty is more beautiful still.<br />
					</p>
				</td>
			</tr>
			<!-- 下方音乐控件 audio-->
			<tr>
				<td colspan="7">
					<audio src="media/beijing.mp3" controls="controls"  autoplay="autoplay" preload="auto" loop="loop" ></audio>
				</td>
			</tr>
		</table>
	</body>
</html>
